<template>
  <div class="bg">
    <Header :title="title"></Header>
    <!-- 分区 -->
    <div style="display: flex;">
      <div class="flex-1"></div>
      <div class="flex-2">
        <!-- 搜索栏 -->
        <section class="search_bar">
          <LInput label="任务编号" v-model="a"></LInput>
          <LInput label="任务名称" v-model="b" style="margin-left: 16px"></LInput>
          <LDateTimeSelect2 label="任务起止时间" :value="c" @time-event="getNewTime" style="margin-left: 16px"></LDateTimeSelect2>
          <LSelect label="是否启用此方案" :value="d" :options="option" @selected-event="getNewSelected" style="margin-left: 16px"></LSelect>
        </section>
        <!-- 月  -->
        <div class="box">
          <el-checkbox :indeterminate="isAllMonth" v-model="allMonth" @change="checkAllMonth" border>按月执行</el-checkbox>
          <el-checkbox-group v-model="month" @change="monthChange">
            <span style="margin-right:10px"></span>
            <el-checkbox v-for="item in months" :label="item" :key="item" border>{{item}}月</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 周  -->
        <div class="box">
          <el-checkbox :indeterminate="isAllWeek" v-model="allWeek" @change="checkAllWeek" border>按周执行</el-checkbox>
          <el-checkbox-group v-model="week" @change="weekChange">
            <span style="margin-right:10px"></span>
            <el-checkbox v-for="item in weeks" :label="item" :key="item" border>周{{item}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 天  -->
        <div class="box">
          <el-checkbox :indeterminate="isAllDay" v-model="allDay" @change="checkAllDay" border>按天执行</el-checkbox>
          <el-checkbox-group v-model="day" @change="dayChange">
            <span style="margin-right:10px"></span>
            <el-checkbox v-for="item in days" :label="item" :key="item" border>{{item}}日</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 小时  -->
        <div class="box">
          <el-checkbox :indeterminate="isAllHour" v-model="allHour" @change="checkAllHour" border>按小时执行</el-checkbox>
          <el-checkbox-group v-model="hour" @change="hourChange">
            <span style="margin-right:10px"></span>
            <el-checkbox v-for="item in hours" :label="item" :key="item" border>{{item}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 分钟  -->
        <div class="box">
          <el-checkbox :indeterminate="isAllMinute" v-model="allMinute" @change="checkAllMinute" border>按分钟执行</el-checkbox>
          <el-checkbox-group v-model="minute" @change="minuteChange">
            <span style="margin-right:10px"></span>
            <el-checkbox v-for="item in minutes" :label="item" :key="item" border>{{item}}</el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 1 -->
        <div class="box">
          <el-form label-width="110px" :model="warnForm" ref="warnFormRef" :rules="warnFormRules" size="small" :inline="true">
            <el-form-item label="频率(分)" prop="a" style="width:40%">
              <el-input v-model="warnForm.a"></el-input>
            </el-form-item>
            <span>【最小执行频率(分)，0代表数据上传时即时解发】</span>
            <el-form-item label="表达式" prop="b" style="width:40%">
              <el-input v-model="warnForm.b"></el-input>
            </el-form-item>
            <span>【最小执行频率(分)，0代表数据上传时即时解发】</span>
            <el-form-item label="设定值表达式" prop="b" style="width:40%">
              <el-input v-model="warnForm.b"></el-input>
            </el-form-item>
            <span>【当满足表达式时，设置的被控制动作的值的表达式】</span>
          </el-form>
        </div>
        <!-- 2 -->
        <div class="down">
          <el-button size="mini" type="primary">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Header from "@/components/Header";
import LInput from "@/components/LInput.vue";
import LDateTimeSelect2 from "@/components/LDateTimeSelect2.vue";
import LSelect from "@/components/LSelect.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LSelect,
  },
  data() {
    return {
      title: "告警管理—时间策略",
      a: "",
      b: "",
      c: "",
      d: "",
      //=================================================================================
      isAllMonth: true, //是否全选样式控制
      allMonth: false, //
      month: [], //选中项集合
      months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
      //=================================================================================
      isAllWeek: true, //是否全选样式控制
      allWeek: false, //
      week: [], //选中项集合
      weeks: ["日", "一", "二", "三", "四", "五", "六"],
      //=================================================================================
      isAllDay: true, //是否全选样式控制
      allDay: false, //
      day: [], //选中项集合
      days: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      //=================================================================================
      isAllHour: true, //是否全选样式控制
      allHour: false, //
      hour: [], //选中项集合
      hours: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
      ],
      //=================================================================================
      isAllMinute: true, //是否全选样式控制
      allMinute: false, //
      minute: [], //选中项集合
      minutes: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
        "32",
        "33",
        "34",
        "35",
        "36",
        "37",
        "38",
        "39",
        "40",
        "41",
        "42",
        "43",
        "44",
        "45",
        "46",
        "47",
        "48",
        "49",
        "50",
        "51",
        "52",
        "53",
        "54",
        "55",
        "56",
        "57",
        "58",
        "59",
        "60",
      ],
      //=================================================================================
      warnForm: {},
    };
  },
  methods: {
    getNewTime(t) {
      this.c = t;
    },
    getNewSelected(s) {
      this.d = s;
    },
    //==========================================================================
    // 月
    checkAllMonth(val) {
      this.month = val ? this.months : [];
      this.isAllMonth = false;
      console.log("this.month:", this.month);
    },
    monthChange(value) {
      let checkedCount = value.length;
      this.allMonth = checkedCount === this.months.length;
      this.isAllMonth = checkedCount > 0 && checkedCount < this.months.length;
    },
    //==========================================================================
    // 周
    checkAllWeek(val) {
      this.week = val ? this.weeks : [];
      this.isAllWeek = false;
      console.log("this.week:", this.week);
    },
    weekChange(value) {
      let checkedCount = value.length;
      this.allWeek = checkedCount === this.weeks.length;
      this.isAllWeek = checkedCount > 0 && checkedCount < this.weeks.length;
    },
    //==========================================================================
    // 天
    checkAllDay(val) {
      this.day = val ? this.days : [];
      this.isAllDay = false;
      console.log("this.day:", this.week);
    },
    weekChange(value) {
      let checkedCount = value.length;
      this.allDay = checkedCount === this.days.length;
      this.isAllDay = checkedCount > 0 && checkedCount < this.days.length;
    },
    //==========================================================================
    // 小时
    checkAllHour(val) {
      this.hour = val ? this.hours : [];
      this.isAllHour = false;
      console.log("this.hour:", this.hour);
    },
    weekChange(value) {
      let checkedCount = value.length;
      this.allHour = checkedCount === this.hours.length;
      this.isAllHour = checkedCount > 0 && checkedCount < this.hours.length;
    },
    //==========================================================================
    // 分钟
    checkAllMinute(val) {
      this.minute = val ? this.minutes : [];
      this.isAllMinute = false;
      console.log("this.minute:", this.minute);
    },
    minuteChange(value) {
      let checkedCount = value.length;
      this.allMinute = checkedCount === this.minutes.length;
      this.isAllMinute = checkedCount > 0 && checkedCount < this.minutes.length;
    },
    //==========================================================================
    //==========================================================================
    //==========================================================================
  },
};
</script>


<style  lang='less' scoped>
.bg {
  display: flex;
  flex-direction: column;

  .search_bar {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
  }
}

.flex-1 {
  width: 24%;
  height: 89.5vh;
  border: 2px solid rgba(255,255,255,0.3);
  margin-right: 1%;
}

.flex-2 {
  width: 75%;
  height: 89.5vh;

  .box {
    width: 100%;
    padding: 10px 10px;
    border-bottom: 1px solid rgb(0, 151, 252);
    box-shadow: 0px 15px 10px -15px rgb(0, 255, 157);
    // x轴 Y轴 模糊程度   模糊长度
    margin: auto;
  }
  .down {
    width: 100%;
    text-align: center;
    margin: 10px;
  }

  /deep/.el-checkbox {
    margin-right: 0px;
    width: 70px;
    // height: 38px;
  }

  /deep/.el-checkbox__inner {
    border: 1px solid RGBA(114, 174, 255, 1);
  }
}
</style>